<script setup lang="tsx">
import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ElMessage } from 'element-plus'
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { withdrawalConfigDetailsApi, withdrawalConfigSaveApi } from '@/api/withdrawalConfig'
import type { WithdrawalConfig } from '@/api/withdrawalConfig/types'

const { t } = useI18n()

const tabs = [
  {
    label: '结算池商户本金提现',
    value: 1
  },
  {
    label: '结算池商户补贴提现配置',
    value: 4
  },
  {
    label: '商户补贴提现配置',
    value: 3
  },
  {
    label: '经纪人提现配置',
    value: 2
  }
]

const rules = reactive({})

const activeTab = ref(1)
const setForm = (v) => {
  setSchema([
    {
      field: 'minAmt',
      path: 'hidden',
      value: v === 1 || v === 4
    },
    {
      field: 'singleMaxAmt',
      path: 'hidden',
      value: v === 1 || v === 4
    },
    {
      field: 'dayCount',
      path: 'hidden',
      value: v === 1 || v === 4
    },
    {
      field: 'settingText',
      path: 'hidden',
      value: v !== 2
    },
    {
      field: 'settingText',
      path: 'component',
      value: v === 2 ? 'Divider' : ''
    },
    {
      field: 'autoApprovalType',
      path: 'hidden',
      value: v !== 2
    },
    {
      field: 'autoApprovalAmt',
      path: 'hidden',
      value: v !== 2
    }
  ])
}
const tabChange = (v) => {
  setForm(v)
  activeTab.value = v
  getWithdrawalConfig()
}

const currentWithdrawalConfig = ref<Nullable<WithdrawalConfig>>(null)

const getWithdrawalConfig = () => {
  let withdrawalUserType = 0
  let financialAccountType = 0
  switch (unref(activeTab)) {
    case 1:
      withdrawalUserType = 1
      financialAccountType = 2
      break
    case 2:
      withdrawalUserType = 2
      financialAccountType = 1
      break
    case 3:
      withdrawalUserType = 3
      financialAccountType = 1
      break
    case 4:
      withdrawalUserType = 3
      financialAccountType = 2
      break
  }
  withdrawalConfigDetailsApi(withdrawalUserType, financialAccountType).then((res: any) => {
    if (res.code === 200) {
      currentWithdrawalConfig.value = res.data as WithdrawalConfig
      setSchema([
        {
          field: 'autoApprovalAmt',
          path: 'hidden',
          value: activeTab.value !== 2 || res.data.autoApprovalType === 1
        }
      ])
      setValues(res.data)
    }
  })
}

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: '提现条件',
    colProps: {
      span: 24
    },
    component: 'Divider',
    componentProps: {
      borderStyle: 'none'
    }
  },
  {
    field: 'minAmt',
    label: t('withdrawalConfig.min'),
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '50%'
      },
      type: 'number',
      slots: {
        append: () => <span>元</span>
      }
    }
  },
  {
    field: 'singleMaxAmt',
    label: '单次最高可提金额',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '50%'
      },
      type: 'number',
      slots: {
        append: () => <span>元</span>
      }
    }
  },
  {
    field: 'dayCount',
    label: '单日可提次数',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '50%'
      },
      type: 'number',
      slots: {
        append: () => <span>次</span>
      }
    }
  },
  // {
  //   field: 'commission',
  //   label: '提现手续费',
  //   component: 'Input',
  //   colProps: {
  //     span: 24
  //   },
  //   componentProps: {
  //     style: {
  //       width: '50%'
  //     },
  //     type: 'number',
  //     slots: {
  //       append: () => <span>%</span>
  //     }
  //   }
  // },
  {
    field: 'description',
    label: '提现说明',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      type: 'textarea',
      rows: 4
    }
  },
  {
    field: 'settingText',
    label: '提现自动审核设置',
    colProps: {
      span: 24
    },
    component: 'Divider',
    componentProps: {
      borderStyle: 'none'
    }
  },
  {
    field: 'autoApprovalType',
    label: '审核方式',
    colProps: {
      span: 24
    },
    component: 'RadioGroup',
    componentProps: {
      options: [
        { label: '人工审核', value: 1 },
        { label: '自动审核', value: 2 }
      ],
      on: {
        change: (val) => {
          setSchema([
            {
              field: 'autoApprovalAmt',
              path: 'hidden',
              value: val === 1
            }
          ])
        }
      }
    }
  },
  {
    field: 'autoApprovalAmt',
    label: '提现金额 <=',
    hidden: true,
    colProps: {
      span: 24
    },
    component: 'Input',
    formItemProps: {
      labelWidth: 450
    },
    componentProps: {
      style: {
        width: 100
      },
      type: 'number',
      slots: {
        append: () => (
          <>
            <span>元</span>
            {/* <span class="bg-white absolute">自动审核通过</span> */}
          </>
        )
      }
    }
  }
])

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, setSchema } = formMethods

const saveLoading = ref(false)

const save = async () => {
  saveLoading.value = true
  const formData = await getFormData()
  if (formData.minAmt > 99999999) {
    ElMessage.error('起提金额不得超过99999999')
    saveLoading.value = false
    return
  }
  if (formData.singleMaxAmt > 99999999) {
    ElMessage.error('单次最高可提金额不得超过99999999')
    saveLoading.value = false
    return
  }
  if (formData.dayCount > 99999999) {
    ElMessage.error('单日可提次数不得超过99999999')
    saveLoading.value = false
    return
  }
  // if (formData.commission > 100 || formData.commission < 0) {
  //   ElMessage.error('提现手续费为0到100之间')
  //   saveLoading.value = false
  //   return
  // }
  if (formData.autoApprovalAmt > 99999999 && formData.autoApprovalType === 2) {
    ElMessage.error('提现金额不得超过99999999')
    saveLoading.value = false
    return
  }
  const res = await withdrawalConfigSaveApi(formData as WithdrawalConfig)
  saveLoading.value = false
  if (res.code === 200) {
    ElMessage.success(t('toast.saveSuccess'))
  } else {
    ElMessage.error(res.message)
  }
}

onMounted(() => {
  getWithdrawalConfig()
  setForm(activeTab.value)
})
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentWrap class="flex-[3] ml-20px">
      <ElTabs v-model="activeTab" @tab-change="tabChange">
        <ElTabPane v-for="item in tabs" :key="item.value" :label="item.label" :name="item.value" />
        <Form :rules="rules" :schema="schema" label-width="240" @register="formRegister" />
        <ElButton
          v-hasPermi="'POST /withdrawalConfig/save'"
          type="primary"
          class="ml-10"
          :loading="saveLoading"
          @click="save"
        >
          {{ t('exampleDemo.save') }}
        </ElButton>
      </ElTabs>
    </ContentWrap>
  </div>
</template>
